<script setup>


import { ref } from 'vue'
import {useCounterStore} from './store';
import MyTop from "./components/myTop.vue";

const st = useCounterStore()

// 状态
const count = ref(0)
//分模块的时候、分不同的组件的时候 在子组件中使用父组件数据需要传递参数
// a/b/c/d/e...多级传递参数工作量非常大 可以使用 session、cookie
// 状态管理类似于定义一套全局变量

// 动作
function increment() {
  count.value++
}

function myChange(){
  //st.changeUserInfo('李四','123456')
  //st.userName='直接改变用户名---李四'
  //st.password='直接改变密码---123123'

  //st.$patch({ count: 200,userName:'王五',password:'12312123' })

  // st.$patch((state)=>{ //函数形式 可以自定义逻辑
  //   state.count++
  //   state.userName='直接改变用户名---李四'
  //   state.password='直接改变密码---123123'
  // })

  st.$state={
    count:1000
  }

}

//如果state中的值改变 那么会执行
st.$subscribe((args,state)=>{
  console.log(args,state);
})

st.$onAction((args)=>{
  console.log('action订阅')
  console.log(args);
})

</script>

<template>
  <my-top></my-top>
  <h1>pinia 状态管理</h1>
  <button @click="st.increment">点击</button><br/>
  <button @click="myChange">改变用户信息</button><br/>

  <h1>改变state中的值:1、直接改变</h1>
  <button @click="st.count++">累加</button><br/>

  st.count:{{st.count}}<br/>
  st.userName:{{st.userName}}<br/>
  st.password:{{st.password}}<br/>
  st.double:{{st.double}}<br/>
  st.userInfo::{{st.userInfo}}

  <button @click="st.$reset">重置</button><br/>

</template>
